<script setup lang="ts">
import { ref ,reactive,watch,defineProps} from 'vue'
const dialogVisible = ref(false)
const certTab = ref('personal')
const changeTab = (tab) => {
    certTab.value = tab
}
const keyword = ref('')
const fileList = ref<UploadUserFile[]>([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
])

const dialogImageUrl = ref('')
const imgVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  imgVisible.value = true
}



const formInline = reactive({
    authType: '',
    name: '',
    idType: '',
    idNumber: '',
})
const tableData = ref([
{ id: 1, name: '崔宏强', idType: '身份证', idNumber: '123456789', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, name: '崔宏强', idType: '身份证', idNumber: '123456789', createdAt: '2023-01-01', status: '认证成功' },
{ id: 1, name: '崔宏强', idType: '身份证', idNumber: '123456789', createdAt: '2023-01-01', status: '认证失败' },
{ id: 1, name: '崔宏强', idType: '身份证', idNumber: '123456789', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, name: '崔宏强', idType: '身份证', idNumber: '123456789', createdAt: '2023-01-01', status: '认证成功' },
{ id: 1, name: '崔宏强', idType: '身份证', idNumber: '123456789', createdAt: '2023-01-01', status: '认证失败' },
{ id: 1, name: '崔宏强', idType: '身份证', idNumber: '123456789', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, name: '崔宏强', idType: '身份证', idNumber: '123456789', createdAt: '2023-01-01', status: '认证成功' },
{ id: 1, name: '崔宏强', idType: '身份证', idNumber: '123456789', createdAt: '2023-01-01', status: '认证失败' },
{ id: 1, name: '崔宏强', idType: '身份证', idNumber: '123456789', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, name: '崔宏强', idType: '身份证', idNumber: '123456789', createdAt: '2023-01-01', status: '认证成功' },
{ id: 1, name: '崔宏强', idType: '身份证', idNumber: '123456789', createdAt: '2023-01-01', status: '认证失败' },
{ id: 1, name: '崔宏强', idType: '身份证', idNumber: '123456789', createdAt: '2023-01-01', status: '认证中' },
])

const tableData2 = ref([
{ id: 1, companyName: '北京荟米科技有限公司', legalRepresentative: '崔宏强', idType: '营业执照', idNumber: '987654321', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, companyName: '北京荟米科技有限公司', legalRepresentative: '崔宏强', idType: '营业执照', idNumber: '987654321', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, companyName: '北京荟米科技有限公司', legalRepresentative: '崔宏强', idType: '营业执照', idNumber: '987654321', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, companyName: '北京荟米科技有限公司', legalRepresentative: '崔宏强', idType: '营业执照', idNumber: '987654321', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, companyName: '北京荟米科技有限公司', legalRepresentative: '崔宏强', idType: '营业执照', idNumber: '987654321', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, companyName: '北京荟米科技有限公司', legalRepresentative: '崔宏强', idType: '营业执照', idNumber: '987654321', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, companyName: '北京荟米科技有限公司', legalRepresentative: '崔宏强', idType: '营业执照', idNumber: '987654321', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, companyName: '北京荟米科技有限公司', legalRepresentative: '崔宏强', idType: '营业执照', idNumber: '987654321', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, companyName: '北京荟米科技有限公司', legalRepresentative: '崔宏强', idType: '营业执照', idNumber: '987654321', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, companyName: '北京荟米科技有限公司', legalRepresentative: '崔宏强', idType: '营业执照', idNumber: '987654321', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, companyName: '北京荟米科技有限公司', legalRepresentative: '崔宏强', idType: '营业执照', idNumber: '987654321', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, companyName: '北京荟米科技有限公司', legalRepresentative: '崔宏强', idType: '营业执照', idNumber: '987654321', createdAt: '2023-01-01', status: '认证中' },
{ id: 1, companyName: '北京荟米科技有限公司', legalRepresentative: '崔宏强', idType: '营业执照', idNumber: '987654321', createdAt: '2023-01-01', status: '认证中' },
])

const tableData3 = ref([
{ id: 1, email: '17600521247@163.com', createdAt: '2024-11-28 15:13:56', status: '已认证' },
{ id: 1, email: '17600521247@163.com', createdAt: '2024-11-28 15:13:56', status: '已认证' },
{ id: 1, email: '17600521247@163.com', createdAt: '2024-11-28 15:13:56', status: '已认证' },
{ id: 1, email: '17600521247@163.com', createdAt: '2024-11-28 15:13:56', status: '已认证' },
{ id: 1, email: '17600521247@163.com', createdAt: '2024-11-28 15:13:56', status: '已认证' },
{ id: 1, email: '17600521247@163.com', createdAt: '2024-11-28 15:13:56', status: '已认证' },
{ id: 1, email: '17600521247@163.com', createdAt: '2024-11-28 15:13:56', status: '已认证' },
{ id: 1, email: '17600521247@163.com', createdAt: '2024-11-28 15:13:56', status: '已认证' },
{ id: 1, email: '17600521247@163.com', createdAt: '2024-11-28 15:13:56', status: '已认证' },
{ id: 1, email: '17600521247@163.com', createdAt: '2024-11-28 15:13:56', status: '已认证' },
{ id: 1, email: '17600521247@163.com', createdAt: '2024-11-28 15:13:56', status: '已认证' },
{ id: 1, email: '17600521247@163.com', createdAt: '2024-11-28 15:13:56', status: '已认证' },
{ id: 1, email: '17600521247@163.com', createdAt: '2024-11-28 15:13:56', status: '已认证' },
])

const emit = defineEmits(['updatePageShow', 'updateCertShow'])
const backHandle = () => {
    emit('updatePageShow', true)
    emit('updateCertShow', false)
}
const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    }
})
watch(() => props.isShow, (val) => {
    dialogVisible.value = val
}, { immediate: true })


</script>
<template>
    <div class="bs-panel">
        <div class="bs-panel-body">
            <div class="bs-panel_hd">
                <div class="bs-panel_tt bold">认证列表</div>
                <el-link @click="backHandle">返回上一页</el-link>
            </div>
            <div class="cert-data">
                <div class="cert-data-item" @click="changeTab('personal')">
                    <div class="cert-data-item_tt">个人认证</div>
                    <div class="cert-data-item_bd">8</div>
                </div>
                <div class="cert-data-item" @click="changeTab('enterprise')">
                    <div class="cert-data-item_tt">企业认证</div>
                    <div class="cert-data-item_bd">2</div>
                </div>
                <div class="cert-data-item" @click="changeTab('email')">
                    <div class="cert-data-item_tt">邮箱认证</div>
                    <div class="cert-data-item_bd">5</div>
                </div>
            </div>
            <div class="cert-filter">
                <div class="btn btn-cert" @click="dialogVisible = true">添加新的认证</div>
                <el-input v-model="keyword" placeholder="输入关键词快速查找" style="width: 200px;">
                    <template #suffix>
                        <el-icon class="el-input__icon"><Search /></el-icon>
                    </template>
                </el-input>
            </div>
            <template v-if="certTab === 'personal'">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="100" />
                    <el-table-column prop="name" label="姓名"  />
                    <el-table-column prop="idType" label="证件类型" />
                    <el-table-column prop="idNumber" label="证件号码" />
                    <el-table-column prop="createdAt" label="创建时间" />
                    <el-table-column prop="status" label="状态" />
                    <el-table-column label="操作" width="80">
                        <template #default="scope">
                            <el-link type="primary" size="small">删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bs-panel-footer">
                    <el-pagination background layout="prev, pager, next" :total="1000" />
                </div>
            </template>
            <template v-else-if="certTab === 'enterprise'">
                <el-table :data="tableData2" style="width: 100%">
                    <el-table-column prop="id" width="100" label="序号" />
                    <el-table-column prop="companyName" label="企业名称"  width="200"/>
                    <el-table-column prop="legalRepresentative" label="法定代表人" />
                    <el-table-column prop="idType" label="证件类型" />
                    <el-table-column prop="idNumber" label="证件号码" />
                    <el-table-column prop="createdAt" label="创建时间"  />
                    <el-table-column prop="status" label="状态"  />
                    <el-table-column label="操作" width="80">
                        <template #default="scope">
                            <el-link type="primary" size="small">删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bs-panel-footer">
                    <el-pagination background layout="prev, pager, next" :total="1000" />
                </div>
            </template>
            <template v-else-if="certTab === 'email'">
                <el-table :data="tableData3" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="100" />
                    <el-table-column prop="email" label="邮箱" width="300" />
                    <el-table-column prop="createdAt" label="创建时间" />
                    <el-table-column prop="status" label="状态" width="200" />
                    <el-table-column label="操作" width="80">
                        <template #default="scope">
                            <el-link type="primary" size="small">删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bs-panel-footer">
                    <el-pagination background layout="prev, pager, next" :total="1000" />
                </div>
            </template>
        </div>
    </div>
    <el-dialog v-model="imgVisible" width="520">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
    <el-dialog
    v-model="dialogVisible"
    title="添加认证"
    width="520"
    >
        <div class="dialog-form">
            <el-form :model="formInline" label-width="100px">
                <el-form-item label="认证类型：">
                    <el-select v-model="formInline.idType" placeholder="请选择" style="width: 120px">
                        <el-option label="个人认证" value="1" />
                        <el-option label="企业认证" value="2" />
                        <el-option label="邮箱认证" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名：">
                    <el-input v-model="formInline.name" placeholder="请输入" style="width: 120px"/>
                </el-form-item>
                <el-form-item label="证件类型：">
                    <el-select v-model="formInline.idType" placeholder="请选择" style="width: 240px">
                        <el-option label="身份证" value="1" />
                        <el-option label="护照" value="2" />
                        <el-option label="军官证" value="3" />
                        <el-option label="港澳居民来往内地通行证" value="4" />
                        <el-option label="港澳居民居住证" value="5" />
                        <el-option label="台湾居民来往大陆通行证" value="6" />
                        <el-option label="台湾居民居住证" value="7" />
                        <el-option label="外国人永久居留身份证" value="8" />
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号码：">
                    <el-input v-model="formInline.idNumber" placeholder="请输入企业名称" style="width: 240px"/>
                </el-form-item>
                <el-form-item label="上传证件：">
                    <div class="upload-cell">
                        <el-upload
                            class="cert-upload"
                            v-model:file-list="fileList"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                            list-type="picture-card"
                            :limit="1"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            >
                            <div class="upload-in">
                                <el-icon size="20"><Plus /></el-icon>
                                <div>上传</div>
                            </div>
                        </el-upload>
                    </div>
                    <div class="upload-tip"> 请上传证件的人像面图片</div>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">
                添加
            </el-button>
        </div>
    </template>
    </el-dialog>
</template>
<style scoped lang='scss'>
    .cert-data{
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }
    .cert-data-item{
        cursor: pointer;
        text-align: center;
        flex: 1;
        .cert-data-item_tt{
            color: #999;
            margin-bottom: 10px;
        }
        .cert-data-item_bd{
            font-size: 20px;
            font-weight: bold;
        }
    }
    .cert-filter{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
        .btn-cert{
            border: 1px dashed #ddd;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            width: 150px;
        }
    }
    .bs-panel-footer{
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }

    .upload-tip{
        color: #666;
        font-size: 14px;
    }
    .upload-cell{
        width: 100%;
    }
    .upload-in{
        text-align: center;
        line-height: 1.4;
    }
    .cert-upload ::v-deep .el-upload--picture-card{
        width: 150px;
        height: 100px;
        margin-right: 10px;
    }
    .cert-upload ::v-deep .el-upload-list--picture-card .el-upload-list__item{
        width: 150px;
        height: 100px;
    }
    .cert-upload ::v-deep .el-upload-list--picture-card{
        flex-direction: row-reverse;
    }



</style>